<template>
  <div class="new-modal">
    <el-dialog
      :modal="modal"
      :close-on-click-modal="false"
      :visible.sync="addModal"
      fullscreen
      :lock-scrol="true"
      :show-close="false"
    >
      <dull-modal
        slot="title"
        @close="cancel"
        :showClose="showClose"
        :modal="false"
        :title="title"
        :setLook="setLook"
      >
      <slot name="title"></slot>
    </dull-modal>
      <!-- tent sta -->
      <slot></slot>
      <!-- tent end -->
      <footer-modal
        slot="footer"
        :loading="loading"
        :close="close"
        :butName="butName"
        @close="cancel"
        :submit="submit"
        :setLook="setLook"
        @submit="$emit('submit')"
      >
        <slot name="elseBut"></slot>
      </footer-modal>
    </el-dialog>
  </div>
</template>
<script>
import DullModal from "./dullModal.vue";
import FooterModal from "./footerModal.vue";
export default {
  components: {
    DullModal,
    FooterModal,
  },
  props: {
    // name
    title: {
      type: String | Boolean | Number,
      default: "",
    },
    // name
    butName: {
      type: String,
      default: "保存",
    },
    // show 弹出
    showModal: {
      type: Boolean,
      default: false,
    },
    // 确认 loading
    loading: {
      type: Boolean,
      default: false,
    },
    // show 确认
    submit: {
      type: Boolean,
      default: true,
    },
    // show 取消
    close: {
      type: Boolean,
      default: true,
    },
    //  关闭按钮显示
    showClose: {
      type: Boolean,
      default: true,
    },
    // 遮罩()
    modal: {
      type: Boolean,
      default: false,
    },
    // 预测 查看的状态
    setLook: {
      default: "",
    },
  },
  watch: {
    showModal(val) {
      this.addModal = val;
    },
    addModal(val) {
      this.$emit("update:showModal", val);
    },
  },
  data() {
    return {
      addModal: false,
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.addModal = false;
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss">
.new-modal {
  .el-dialog__wrapper {
    margin-left: 15px;
    position: absolute !important;
  }
  .v-modal {
    position: absolute !important;
  }
  .el-dialog__header {
    background-color: #fff !important;
    padding-bottom: 0;
    z-index: 99;
    position: sticky !important;
    top: 0;
  }
  .el-dialog__body {
    padding: 10px 10px;
    min-height: 70vh !important;
  }
  .el-dialog__footer {
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
    position: sticky !important;
    bottom: 0;
    padding: 10px 10px 20px;
    z-index: 999;
    text-align: right;
  }
}
</style>
